<template>
  <zzm-message title="虚拟列表" style="color:black">
    <template #content>
<button @click="updateRows">增加</button>
      <dv-scroll-board :config="config" style="width:100%;height:220px" @mouseover="mouseoverHandler"
        @click="clickHandler" />

    </template>
  </zzm-message>
</template>
<script lang="ts" setup>

// import { dv-scroll-board } from "@kjgl77/datav-vue3";

const config = reactive({
  header: ['列1', '列2', '列3'],
  data: [
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3'],
  ],
  index: true,
  columnWidth: [50],
  align: ['center'],
  waitTime:1000
})



const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  console.log(e)
}
await nextTick()
//  setInterval(()=>{
    // config.data.push(['行'+config.data.length+'列1','行'+config.data.length+'列2','行'+config.data.length+'列3'])
    // console.log(config.data)
    // updateRows()
  // },1000)
const updateRows = () => {
  config.data.push([`行${config.data.length + 1}列1`, `行${config.data.length + 1}列2`, `行${config.data.length + 1}列3`])
}
</script>

<style scoped></style>
